<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>穿梭框</title>
    <link rel="stylesheet" href="css/layui.css">
    <script src="layui.js"></script>
</head>
<body>
    <div id="test1"></div>
    <script>
    layui.use('transfer', function(){
      var transfer = layui.transfer;
      var $ = layui.$
     //获取后台的数据

     $.post(
         "http://stuapi.ysdjypt.com/api/GetRolesByUserIdLayUI"
     ,{
        uid:"c8033529-c2f7-4b32-877f-06004f05f7fe"
        ,token:"6cde0639-047a-4355-8cdd-fa9637bc91d9"
     }
     ,function(res){
        // console.log(res)
         var valueArr = new Array;//右侧列表数据集合
         for(var i=0;i<res.data.length;i++){
        valueArr.push(res.data[i].Id);

         }
        // console.log(valueArr);
        $.post("http://stuapi.ysdjypt.com/api/GetRolesAll"
        ,{
          token:"6cde0639-047a-4355-8cdd-fa9637bc91d9"}
        ,function(res){
         // console.log(res);
               //渲染
      transfer.render({
        elem: '#test1'  //绑定元素
        ,title:["系统角色","已拥有角色"]
        ,data: res
        ,value:valueArr
        ,id: 'demo1' //定义索引
        ,parseData: function(res){
        return {
        "value": res.Id //数据值
        ,"title": res.Name //数据标题
        ,"disabled": res.disabled  //是否禁用
        ,"checked": res.checked //是否选中
    }
  }
        ,onchange: function(data, index){//分配角色
        console.log(data); //得到当前被穿梭的数据
        console.log(index); //如果数据来自左边，index 为 0，否则为 1
        if(index==0){//左穿右，分配
          for(var i=0;i<data.length;i++){
          $.post("http://stuapi.ysdjypt.com/api/AddUserToRole"
          ,{
          uId:"c8033529-c2f7-4b32-877f-06004f05f7fe"
          ,rId:data[i].value
          ,token:"6cde0639-047a-4355-8cdd-fa9637bc91d9"
          },function(res){},'json');
        }
        }else{//右穿左，移除
          for(var i=0;i<data.length;i++){
          $.post("http://stuapi.ysdjypt.com/api/RemoveUserFromRole"
          ,{
          uId:"c8033529-c2f7-4b32-877f-06004f05f7fe"
          ,rId:data[i].value
          ,token:"6cde0639-047a-4355-8cdd-fa9637bc91d9"
          },function(res){},'json');
        }
        }


       
  }
      });
        },'json');
     
     }
     ,'json');

     

     
    });
    </script>
</body>
</html>